<template>
    <div class="sumS">
        <div class="divS">
            <div class="divT1">
                <img src="../assets/image/background.png" alt="#">
            </div>
            <div class="divT2">
                <h1 style="text-align: center">欢迎登录</h1>
                <label>
                    <svg class="icon"
                         style="width: 2em;height: 2em;vertical-align: middle;fill: currentColor;overflow: hidden;"
                         viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2217">
                        <path d="M926.26863 957.936375l-55.567573 0C859.981924 816.071344 768.64366 697.151907 642.9264 647.223774c-39.952944 19.377326-84.538395 30.569226-131.806955 30.569226-47.273676 0-91.879594-11.192923-131.830491-30.569226-125.716236 49.928133-217.054501 168.847569-227.756237 310.713624l-55.584969 0c9.907651-151.502529 99.44899-280.826943 226.671533-346.280678C251.660158 555.227524 205.943954 467.874013 205.943954 369.606942c0-170.193217 136.641053-308.165592 305.176514-308.165592 168.520111 0 305.160141 137.973398 305.160141 308.165592 0 98.267071-45.716204 185.620581-116.67328 242.049778C826.829873 677.110455 916.358933 806.434869 926.26863 957.936375zM760.786715 369.606942c0-139.254577-111.795179-252.137531-249.666246-252.137531-137.89665 0-249.693876 112.882953-249.693876 252.137531 0 139.248438 111.797225 252.144694 249.693876 252.144694C648.991536 621.751636 760.786715 508.85538 760.786715 369.606942z"
                              fill="#737373" p-id="2218"></path>
                    </svg>
                    <input name="username" placeholder="请输入您的账号" v-model="username">
                </label>
                <label>
                    <svg class="icon"
                         style="width: 2em;height: 2em;vertical-align: middle;fill: currentColor;overflow: hidden;"
                         viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3527">
                        <path d="M839.68 384h-43.52v-97.28C796.16 135.68 673.28 10.24 519.68 10.24S245.76 135.68 245.76 286.72V384H184.32c-46.08 0-84.48 38.4-84.48 84.48v460.8c0 46.08 38.4 84.48 84.48 84.48h657.92c46.08 0 84.48-38.4 84.48-84.48v-460.8c-2.56-46.08-40.96-84.48-87.04-84.48z m-529.92-97.28c0-115.2 94.72-212.48 212.48-212.48s212.48 94.72 212.48 212.48V384H309.76v-97.28z m550.4 642.56c0 10.24-7.68 20.48-20.48 20.48H184.32c-10.24 0-20.48-7.68-20.48-20.48v-460.8c0-10.24 7.68-20.48 20.48-20.48h657.92c10.24 0 20.48 7.68 20.48 20.48v460.8z"
                              fill="#737373" p-id="3528"></path>
                    </svg>
                    <input name="password" placeholder="请输入您的密码" v-model="password">
                </label>
                <span class="buttonS" @click="findPassword">忘记密码?</span>
                <div>
                    <button @click="loginCheck">登录</button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import axios from 'axios';

    export default {
        name: "LoginPage",
        data() {
            return {username: "", password: ""}
        },
        methods: {
            loginCheck() {
                if (this.username.typeof || this.password.typeof || this.username === "" || this.password === "") {
                    alert("请输入相关信息");
                } else {
                    axios.post('/LoginCheck', {username: this.username, password: this.password})
                        .then(function (response) {
                            console.log(response);
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
            },
            findPassword() {
                this.$router.push("/System/OrderBack");
            }
        }
    }
</script>

<style scoped>

* {
  margin: 0;
  padding: 0;
  user-select: none;
}

     .sumS {
        position: absolute;
        width: 100%;
        height: 100vh;
        background-color: rgb(0, 131, 209);
    }

    .divS {
        padding: 1px;
        width: 60%;
        height: 600px;
        margin: 75px auto;
        background-color: white;
        border-radius: 20px;
    }

    img {
        width: 100%;
        height: 100%;
    }


    .divT1 {
        width: 50%;
        height: 80%;
        margin: 60px 0;
        display: inline-block;
        vertical-align: bottom;
    }

    .divT2 {
        width: 40%;
        height: 80%;
        margin: 30px 0;
        vertical-align: bottom;
        display: inline-block;
    }

    i {
        color: rgb(0, 131, 209);
    }

    label {
        display: table;
        margin: 50px auto;
        border-bottom: 1px solid rgba(0, 0, 0, 0.2);
    }


    .icon {
        margin-bottom: 11px;
    }

    input {
        border: none;
        outline: none;
        text-indent: 0.2em;
        width: 80%;
        height: 50px;
        font-size: 23px;
        line-height: 80px;
        background-color: white;
        margin: auto 5px;
    }


    input:-webkit-autofill {
        -webkit-box-shadow: 0 0 0 1000px white inset
    }

    .buttonS {
        display: inline-block;
        width: 80%;
        float: right;
        font-size: 20px;
        text-align: right;
        color: rgba(0, 0, 0, 0.8);
        margin-top: -10px;
        text-decoration-line: none;
        padding-bottom: 30px;
        cursor: pointer;
    }

    .buttonS:hover {
        color: rgb(0, 131, 209);
    }

    button {
        display: block;
        background-color: rgb(0, 131, 209);
        margin: 0 auto;
        width: 70%;
        height: 60px;
        border: none;
        outline: none;
        border-radius: 50px;
        font-size: 20px;
        color: white;
    }
</style>